<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="app-container margin-content padding-content"
      style="overflow-y: auto;">

      <div class="form-wrapper">
        <el-form
          :model="dataForm"
          ref="dataForm">
          <el-form-item label="所属码头" prop="portId">
            <treeselect
              placeholder="请选择"
              :options="options"
              :disable-branch-nodes="true"
              value-consists-of="LEAF_PRIORITY"
              :close-on-select="true"
              :open-on-click="true"
              v-model="dataForm.portId"
              @select="selectPortId"
              style="width: 300px;"/>
          </el-form-item>
        </el-form>
      </div>

      <div class="graph-wrapper">
        <!--<div class="demo"></div>-->
        <template v-if="showFlag">
          <div class="graph" :class="map">

            <div class="conts">
              <div
                class="item type1"
                :class="[item.areaCode, {'type1':item.areaName ==='吉柜区','type2':item.areaName ==='进口重柜区','type3':item.areaName ==='出口重柜区','type4':item.areaName ==='仓库'}]"
                v-for="(item, index) in list" :key="index">
                <div class="inner-text clearfix" :class="{'active':item.usedNum>0}" @click="_detailByArea(item, index)">
                  <span class="left fl">{{item.areaCode}} 已用{{item.usedNum / item.storeNum * 100}}%</span>
                  <span class="right fr">{{item.usedNum}}/{{item.storeNum}}</span>
                </div>
                <el-progress
                  :text-inside="false"
                  :show-text="false"
                  :stroke-width="18"
                  :percentage="item.usedNum / item.storeNum * 100"
                  :color="barColor(item.areaName)"></el-progress>
              </div>
            </div>

            <div class="monitor">
              <el-tooltip
                ref="tooltip"
                v-for="(i, index) in 71" :key="i"
                effect="dark"
                placement="top-start">

                <div slot="content">
                  {{i | sanshangangMonitorFilter}}
                </div>

                <div
                  class="monitor-item"
                  :class="['monitor-' + i]"
                  ref="monitors"
                  @mouseover="handleOver(index)"
                  @mouseout="handleOut(index)">
                </div>
              </el-tooltip>
            </div>

            <div class="pound">
              <div
                class="pound-item"
                :class="['pound-' + i, {'active':poundShowFlag}]"
                v-for="(i, index) in 3"
                :key="i"
                ref="pounds">
              </div>
            </div>
            <div class="crane">
              <div
                class="crane-item"
                :class="['crane-' + i, {'active':craneShowFlag}]"
                v-for="(i, index) in 7"
                :key="i"
                ref="cranes">
              </div>
            </div>
            <div class="gate">
              <div
                class="gate-item"
                :class="['gate-' + i, {'active':gateShowFlag}]"
                v-for="(i, index) in 2"
                :key="i"
                ref="gates">
              </div>
            </div>
            <div class="radiation">
              <div
                class="radiation-item"
                :class="['radiation-' + i, {'active':radiationShowFlag}]"
                v-for="(i, index) in 1"
                :key="i"
                ref="radiations">
              </div>
            </div>

            <div class="pound-btn" @click="poundShow"></div>
            <div class="monitor-btn" @click="noteShow"></div>
            <div class="crane-btn" @click="craneShow"></div>
            <div class="gate-btn" @click="gateShow"></div>
            <div class="radiation-btn" @click="radiationShow"></div>
          </div>
        </template>
        <div class="no-data" v-else>暂无数据</div>
      </div>
    </div>

    <!-- 弹窗, 最新动态 -->
    <cont-dialog v-if="visible" ref="contDialog"></cont-dialog>
  </div>
</template>

<script>
  // api
  import { getPortTree } from '@/api/port'
  import { detailByPortId, detailByArea } from '@/api/storageYard'
  // utils
  import { modifyObj } from '@/utils/tools'
  import { addClass, removeClass, hasClassName, prefixStyle } from '@/utils/dom'
  import { mapFilter } from '@/utils'
  import { portCodeDisabled } from '@/utils/selecterOptions'
  // vuex
  import { mapMutations, mapGetters } from 'vuex'
  // components
  import ContDialog from '@/components/ContDialog'
  import Divider from '@/components/Divider'
  import Treeselect from '@riophae/vue-treeselect'

  const transform = prefixStyle('transform')
  const boxShadow = prefixStyle('boxShadow')

  export default {
    name: 'el-graph',
    data() {
      return {
        loading: false,
        dataForm: {
          portId: null
        },
        list: [],
        options: [],
        visible: false,
        showFlag: false,
        noteShowFlag: true,
        poundShowFlag: true,
        craneShowFlag: true,
        gateShowFlag: true,
        radiationShowFlag: true,
        map: '',
        portCodeDisabled
      }
    },
    computed: {
      ...mapGetters([
        'account'
      ])
    },
    watch: {
      'dataForm.portId'(newVal) {
        if (newVal === 26) {
          this.map = 'cont_map_sanshangang_mt'
          this.showFlag = true
        } else {
          this.map = ''
          this.showFlag = false
        }
      }
    },
    created() {
      this._getPortTree()
      this._detailByPortId()
    },
    methods: {
      _getPortTree() {
        getPortTree().then((res) => {
          this.options = modifyObj(res.data.data)
          this.dataForm.portId = this.options[0].id
        })
      },
      _detailByPortId() {
        this.loading = true
        detailByPortId(this.dataForm).then((res) => {
          if (res.data.data) {
            this.list = res.data.data
          } else {
            this.list = []
          }
          this.loading = false
        })
      },
      _detailByArea(item, index) {
        this.visible = true
        this.$nextTick(() => {
          this.$refs['contDialog'].init({ portId: this.dataForm.portId, areaCode: item.areaCode })
        })
      },
      selectPortId(node) {
        console.log(node.id)
        if (node.id === 26) {
          this.showFlag = true
          this.dataForm.portId = node.id
          this._detailByPortId()
        }
      },
      barColor(areaName) {
        const map = {
          '吉柜区': '#ffa548',
          '进口重柜区': '#41a0f4',
          '出口重柜区': '#3ab5c0',
          '仓库': '#aadaff',
        }
        return map[areaName]
      },
      noteShow() {
        this.$refs.monitors.forEach((item, index) => {
          if (hasClassName(item, 'active')) {
            removeClass(item, 'active')
            this.$refs.monitors[index].style[transform] = `translate3d(0, 0, 0)`
            this.$refs.monitors[index].style[boxShadow] = `none`
            // this.$refs.tooltip[index].showPopper = false
            // this.$refs.notes[index].style[transform] = `translate3d(0, 0, 0)`
            // this.$refs.notes[index].style['zIndex'] = 3
            // this.$refs.notes[index].style['display'] = 'none'
            this.noteShowFlag = true
          } else {
            setTimeout(() => {
              addClass(item, 'active')
            }, 100)
            this.$refs.monitors[index].style[transform] = `translate3d(0, -5px, 0)`
            this.$refs.monitors[index].style[boxShadow] = `5px 5px 5px #ccc`
            // this.$refs.tooltip[index].showPopper = true
            // this.$refs.notes[index].style[transform] = `translate3d(0, -5px, 0)`
            // this.$refs.notes[index].style['zIndex'] = 5
            // this.$refs.notes[index].style['display'] = 'block'
            this.noteShowFlag = false
          }
        })
      },
      poundShow() {
        this.poundShowFlag = !this.poundShowFlag
      },
      craneShow() {
        this.craneShowFlag = !this.craneShowFlag
      },
      gateShow() {
        this.gateShowFlag = !this.gateShowFlag
      },
      radiationShow() {
        this.radiationShowFlag = !this.radiationShowFlag
      },
      handleOver(index) {
        if (this.noteShowFlag) {
          this.$refs.monitors[index].style[transform] = `translate3d(0, -5px, 0)`
          this.$refs.monitors[index].style[boxShadow] = `5px 5px 5px #ccc`
          // this.$refs.notes[index].style[transform] = `translate3d(0, -5px, 0)`
          // this.$refs.notes[index].style['zIndex'] = 5
          // addClass(this.$refs.notes[index], 'active')
        }
      },
      handleOut(index) {
        if (this.noteShowFlag) {
          this.$refs.monitors[index].style[transform] = `translate3d(0, 0, 0)`
          this.$refs.monitors[index].style[boxShadow] = `none`
          // this.$refs.notes[index].style[transform] = `translate3d(0, 0, 0)`
          // this.$refs.notes[index].style['zIndex'] = 3
          // removeClass(this.$refs.notes[index], 'active')
        }
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID'
      })
    },
    components: {
      ContDialog,
      Divider,
      Treeselect
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
  .graph-wrapper {
    position: relative;
    background-color: #fff;
    padding: 16px;
  }

  .graph {
    background-repeat: no-repeat;
  }

  .no-data {
    height: 580px;
    line-height: 580px;
    background-color: #ccc;
    text-align: center;
    color: #666;
  }

  .demo {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 20;
    width: 1192px;
    height: 651px;
    background-repeat: no-repeat;
    background-image: url(../../img/demo.png);
  }

  .demo-2k {
    width: 1834px;
    height: 1002px;
    background-repeat: no-repeat;
    background-image: url(../../img/demo@2k.png);
  }

  .cont_map_sanshangang_mt {
    position: relative;
    width: 1198px;
    height: 652px;
    /*background-image: url(../../img/map-bg.png);*/
    background-image: url(../../img/map-bg2.png);

    .conts {
      /*width: 1192px;*/
      /*height: 651px;*/
    }

    .item {
      width: 173px;
      height: 20px;

      .inner-text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 2px 10px;
        font-size: 12px;

        &.active {
          .left {
            color: #fff;
          }
        }
      }

      .el-progress--without-text .el-progress-bar {
        border-radius: 0;
        border-style: solid;
        border-width: 2px;
      }
      .el-progress-bar__outer,
      .el-progress-bar__inner {
        border-radius: 0;
      }
      .el-progress-bar__innerText {
        vertical-align: 2px;
      }

      /*吉柜区*/
      &.type1 {
        .el-progress--without-text .el-progress-bar {
          border-color: #ffa548;
        }
      }
      /*进口重柜区*/
      &.type2 {
        .el-progress--without-text .el-progress-bar {
          border-color: #41a0f4;
        }
      }
      /*出口重柜区*/
      &.type3 {
        .el-progress--without-text .el-progress-bar {
          border-color: #3ab5c0;
        }
      }
      /*仓库*/
      &.type4 {
        .el-progress--without-text .el-progress-bar {
          border-color: #67c23a;
        }
      }
    }

    .pound-btn,
    .monitor-btn,
    .crane-btn,
    .gate-btn,
    .radiation-btn {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.1);
      cursor: pointer;
      z-index: 4;
    }

    .pound-btn {
      right: 118px;
      bottom: 241px;
      width: 57px;
      height: 24px;
    }
    .monitor-btn {
      right: 106px;
      bottom: 208px;
      width: 69px;
      height: 24px;
    }
    .crane-btn {
      right: 116px;
      bottom: 176px;
      width: 57px;
      height: 24px;
    }
    .gate-btn {
      right: 118px;
      bottom: 143px;
      width: 56px;
      height: 25px;
    }
    .radiation-btn {
      right: 82px;
      bottom: 114px;
      width: 90px;
      height: 20px;
    }

    .F1, .H1, .F2, .H2, .F3, .H3, .F4, .H4, .F5, .H5, .D1, .D2, .D3, .D4, .D5, .D6, .B0, .A0 {
      position: absolute;
      font-size: 12px;
      cursor: pointer;
      z-index: 4;
    }

    .F1 {
      left: 285px;
      top: 98px;
    }
    .H1 {
      left: 478px;
      top: 99px;
      width: 265px;
    }
    .F2 {
      left: 285px;
      top: 123px;
    }
    .H2 {
      left: 478px;
      top: 123px;
      width: 265px;
    }
    .F3 {
      left: 285px;
      top: 146px;
    }
    .H3 {
      left: 478px;
      top: 147px;
      width: 265px;
    }
    .F4 {
      left: 285px;
      top: 170px;
    }
    .H4 {
      left: 478px;
      top: 171px;
      width: 196px;
    }
    .F5 {
      left: 285px;
      top: 194px;
    }
    .H5 {
      left: 478px;
      top: 195px;
      width: 196px;
    }
    .D1 {
      left: 766px;
      top: 98px;
    }
    .D2 {
      left: 766px;
      top: 122px;
    }
    .D3 {
      left: 766px;
      top: 146px;
    }
    .D4 {
      left: 767px;
      top: 169px;
    }
    .D5 {
      left: 767px;
      top: 197px;
      display: none;
    }
    .D6 {
      left: 767px;
      top: 219px;
      display: none;
    }
    .B0 {
      left: 910px;
      top: 146px;
      width: 146px;
      transform: rotate(90deg);
    }
    .A0 {
      left: 991px;
      top: 127px;
      width: 108px;
      transform: rotate(90deg);
    }

    .monitor {
      position: absolute;
      width: 1198px;
      height: 652px;
      /*background-image: url(../../img/map-monitor.png);*/

      .note {
        position: absolute;
        left: 2px;
        top: -31px;
        z-index: 3;
        width: 49px;
        height: 48px;
        background-image: url(../../img/note.png);
        text-align: center;
        line-height: 46px;
        font-size: 12px;
        color: #0e64a7;
        transition: all .8s;
        display: none;
        opacity: 0;

        &.active {
          display: block;
          opacity: 1;
        }
      }

      &-item {
        position: absolute;
        z-index: 4;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-image: url(../../img/monitor.png);
        cursor: pointer;
        opacity: 0;
        transition: all 0.8s;

        &.active {
          opacity: 1;
          transform: translate3d(0, -5px, 0);
        }
      }

      &-12 {
        left: 268px;
        top: 319px;
      }
      &-6 {
        left: 213px;
        top: 262px;
      }
      &-13 {
        left: 328px;
        top: 306px;
      }
      &-15 {
        left: 369px;
        top: 331px;
      }
      &-14 {
        left: 335px;
        top: 330px;
      }
      &-11 {
        left: 146px;
        top: 31px;
      }
      &-8 {
        left: 146px;
        top: 150px;
      }
      &-4 {
        left: 135px;
        top: 273px;
      }
      &-2 {
        left: 117px;
        top: 330px;
      }
      &-1 {
        left: 61px;
        top: 398px;
      }
      &-3 {
        left: 177px;
        top: 304px;
      }
      &-5 {
        left: 96px;
        top: 271px;
      }
      &-7 {
        left: 115px;
        top: 221px;
      }
      &-9 {
        left: 119px;
        top: 89px;
      }
      &-10 {
        left: 171px;
        top: 76px;
      }
      &-16 {
        left: 401px;
        top: 330px;
      }
      &-29 {
        left: 652px;
        top: 303px;
      }
      &-20 {
        left: 409px;
        top: 308px;
      }
      &-21 {
        left: 364px;
        top: 275px;
      }
      &-17 {
        left: 436px;
        top: 332px;
      }
      &-24 {
        left: 446px;
        top: 252px;
      }
      &-18 {
        left: 467px;
        top: 331px;
      }
      &-22 {
        left: 459px;
        top: 285px;
      }
      &-25 {
        left: 513px;
        top: 234px;
      }
      &-32 {
        left: 685px;
        top: 623px;
      }
      &-23 {
        left: 518px;
        top: 280px;
      }
      &-26 {
        left: 567px;
        top: 245px;
      }
      &-31 {
        left: 569px;
        top: 585px;
      }
      &-30 {
        left: 629px;
        top: 401px;
      }
      &-28 {
        left: 684px;
        top: 225px;
      }
      &-37 {
        left: 797px;
        top: 264px;
      }
      &-36 {
        left: 793px;
        top: 323px;
      }
      &-51 {
        left: 860px;
        top: 586px;
      }
      &-41 {
        left: 895px;
        top: 49px;
      }
      &-34 {
        left: 737px;
        top: 514px;
      }
      &-50 {
        left: 859px;
        top: 547px;
      }
      &-35 {
        left: 759px;
        top: 478px;
      }
      &-40 {
        left: 830px;
        top: 84px;
      }
      &-43 {
        left: 865px;
        top: 221px;
      }
      &-33 {
        left: 810px;
        top: 559px;
      }
      &-49 {
        left: 865px;
        top: 504px;
      }
      &-52 {
        left: 861px;
        top: 621px;
      }
      &-42 {
        left: 870px;
        top: 87px;
      }
      &-39 {
        left: 789px;
        top: 61px;
      }
      &-38 {
        left: 797px;
        top: 221px;
      }
      &-27 {
        left: 620px;
        top: 33px;
      }
      &-19 {
        left: 513px;
        top: 314px;
      }
      &-48 {
        left: 858px;
        top: 474px;
      }
      &-47 {
        left: 875px;
        top: 438px;
      }
      &-46 {
        left: 871px;
        top: 408px;
      }
      &-45 {
        left: 874px;
        top: 376px;
      }
      &-44 {
        left: 876px;
        top: 344px;
      }
      &-53 {
        left: 913px;
        top: 220px;
      }
      &-54 {
        left: 915px;
        top: 177px;
      }
      &-59 {
        left: 959px;
        top: 208px;
      }
      &-60 {
        left: 989px;
        top: 226px;
      }
      &-58 {
        left: 957px;
        top: 172px;
      }
      &-61 {
        left: 992px;
        top: 181px;
      }
      &-57 {
        left: 956px;
        top: 138px;
      }
      &-62 {
        left: 988px;
        top: 142px;
      }
      &-56 {
        left: 956px;
        top: 111px;
      }
      &-63 {
        left: 1006px;
        top: 99px;
      }
      &-55 {
        left: 958px;
        top: 81px;
      }
      &-64 {
        left: 999px;
        top: 69px;
      }
      &-65 {
        left: 1055px;
        top: 88px;
      }
      &-66 {
        left: 1044px;
        top: 139px;
      }
      &-67 {
        left: 1078px;
        top: 216px;
      }
      &-68 {
        left: 1094px;
        top: 179px;
      }
      &-69 {
        left: 1121px;
        top: 145px;
      }
      &-70 {
        left: 1144px;
        top: 105px;
      }
      &-71 {
        left: 1126px;
        top: 69px;
      }
    }

    .pound {
      &-item {
        position: absolute;
        /*z-index: 4;*/
        width: 45px;
        height: 44px;
        background-image: url(../../img/pound.png);
        transition: all 0.8s;
        opacity: 0;
        transform: translate3d(0, 0, 0);

        &.active {
          opacity: 1;
          transform: translate3d(0, -5px, 0);
        }
      }

      &-1 {
        left: 810px;
        top: 48px;
      }
      &-2 {
        left: 142px;
        top: 283px;
      }
      &-3 {
        left: 858px;
        top: 250px;
      }
    }

    .crane {
      &-item {
        position: absolute;
        z-index: 4;
        width: 31px;
        height: 31px;
        background-image: url(../../img/crane.png);
        transition: all 0.8s;
        opacity: 0;
        transform: translate3d(0, 0, 0);

        &.active {
          opacity: 1;
          transform: translate3d(0, -5px, 0);
        }
      }

      &-1 {
        left: 674px;
        top: 16px;
      }
      &-2 {
        left: 744px;
        top: 17px;
      }
      &-3 {
        left: 811px;
        top: 16px;
      }
      &-4 {
        left: 877px;
        top: 17px;
      }
      &-5 {
        left: 947px;
        top: 16px;
      }
      &-6 {
        left: 1016px;
        top: 16px;
      }
      &-7 {
        left: 1085px;
        top: 16px;
      }
    }

    .gate {
      &-item {
        position: absolute;
        z-index: 4;
        width: 43px;
        height: 45px;
        background-image: url(../../img/gate.png);
        transition: all 0.8s;
        opacity: 0;
        transform: translate3d(0, 0, 0);

        &.active {
          opacity: 1;
          transform: translate3d(0, -5px, 0);
        }
      }

      &-1 {
        left: 77px;
        top: 341px;
      }
      &-2 {
        left: 419px;
        top: 601px;
      }

    }

    .radiation {
      &-item {
        position: absolute;
        z-index: 4;
        width: 24px;
        height: 23px;
        background-image: url(../../img/radiation.png);
        transition: all 0.8s;
        opacity: 0;
        transform: translate3d(0, 0, 0);

        &.active {
          opacity: 1;
          transform: translate3d(0, -5px, 0);
        }
      }

      &-1 {
        left: 856px;
        top: 68px;
      }

    }
  }

</style>
